import React from 'react'
import PropTypes from 'prop-types'
import ListItemText from '@material-ui/core/ListItemText';
import ListItem from '@material-ui/core/ListItem'
import ListItemAvatar from '@material-ui/core/ListItemAvatar'
import ExpandLess from '@material-ui/icons/ExpandLess';
import ExpandMore from '@material-ui/icons/ExpandMore';
import NestedList from '../List/NestedList'

/**
 * 头像列表
 */
class AvatarWithTextListItem extends React.Component {
    state = {
        open: false,
    };
    handleClick = () => {
        this.setState(state => ({open: !state.open}));
    };

    render() {
        const {primary, secondary, inset, Avatar, children, ...other} = this.props
        return (
            <React.Fragment>
                <ListItem {...other} onClick={this.handleClick}>
                    <ListItemAvatar>
                        {Avatar}
                    </ListItemAvatar>
                    <ListItemText primary={primary} secondary={secondary} inset={inset}/>
                    {this.state.open ? <ExpandLess/> : <ExpandMore/>}
                </ListItem>
                <NestedList open={this.state.open}>
                    {children}
                </NestedList>
            </React.Fragment>

        )
    }
}

AvatarWithTextListItem.propTypes = {
    primary: PropTypes.string.isRequired,
    secondary: PropTypes.string,
    dense: PropTypes.bool,
    classes: PropTypes.object,
    button: PropTypes.bool,
}

export default AvatarWithTextListItem